<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--vieport-->
	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
	<!--禁止将数字变为电话号码-->
	<meta name="format-detection" content="telephone=no" />
    <title>香港小生活</title>
    <meta name="keywords" content="香港小生活" />
    <meta name="description" content="香港小生活" />
    <!--页面样式格式化-->
    <link rel="stylesheet" href="static/css/reset.css" />
    <!--所有页面头部header和底部footer公用样式-->
    <link rel="stylesheet" href="static/css/public.css" />
    <script src="static/js/jquery.min.js"></script>
    <!--[if lt IE 9]> 
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
</head>  	
<body>
	<!--当前页面私有样式-->
	<link href="static/css/cart.css" rel="stylesheet">
	
	<div class="public_noback">
		<h2 class="title">购物车（<a class="carLength"></a>）</h2>
		<a class="del"></a>
	</div>
	<div class="blank_5"></div>
	
	<div class="cartList">
		<div class="item active">
			<a href="#" class="pic">
				<img src="static/picture/cart.jpg" />
			</a>
			<div class="content">
				<h2 class="title">
					<a href="#">7点上架！10板姚记麦秸秆牙刷10版*6支（零利润纯引流，限1000...</a>
				</h2>
				<p class="desc">引流</p>
				<div class="info">
					<div class="left">
						<strong>￥<a class="danjia">42.90</a></strong>
						<span>￥98.00</span>
					</div>
					<div class="right">
						<button class="jian">-</button>
						<input type="text" class="num" value="1" readonly="readonly" />
						<button class="jia">+</button>
					</div>
				</div>
			</div>
		</div>
		<div class="item active">
			<a href="#" class="pic">
				<img src="static/picture/cart.jpg" />
			</a>
			<div class="content">
				<h2 class="title">
					<a href="#">7点上架！10板姚记麦秸秆牙刷10版*6支（零利润纯引流，限1000...</a>
				</h2>
				<p class="desc">引流</p>
				<div class="info">
					<div class="left">
						<strong>￥<a class="danjia">49.90</a></strong>
						<span>￥98.00</span>
					</div>
					<div class="right">
						<button class="jian">-</button>
						<input type="text" class="num" value="1" readonly="readonly" />
						<button class="jia">+</button>
					</div>
				</div>
			</div>
		</div>
		<div class="item">
			<a href="#" class="pic">
				<img src="static/picture/cart.jpg" />
			</a>
			<div class="content">
				<h2 class="title">
					<a href="#">7点上架！10板姚记麦秸秆牙刷10版*6支（零利润纯引流，限1000...</a>
				</h2>
				<p class="desc">引流</p>
				<div class="info">
					<div class="left">
						<strong>￥<a class="danjia">42.90</a></strong>
						<span>￥98.00</span>
					</div>
					<div class="right">
						<button class="jian">-</button>
						<input type="text" class="num" value="1" readonly="readonly" />
						<button class="jia">+</button>
					</div>
				</div>
			</div>
		</div>
		<div class="item active">
			<a href="#" class="pic">
				<img src="static/picture/cart.jpg" />
			</a>
			<div class="content">
				<h2 class="title">
					<a href="#">7点上架！10板姚记麦秸秆牙刷10版*6支（零利润纯引流，限1000...</a>
				</h2>
				<p class="desc">引流</p>
				<div class="info">
					<div class="left">
						<strong>￥<a class="danjia">49.90</a></strong>
						<span>￥98.00</span>
					</div>
					<div class="right">
						<button class="jian">-</button>
						<input type="text" class="num" value="1" readonly="readonly" />
						<button class="jia">+</button>
					</div>
				</div>
			</div>
		</div>
	</div>
	
	<div class="bottom_caozuo">
		<div class="left">
			<label>全选</label>
		</div>
		<div class="right">
			<div class="heji">
				<p>合计：￥<a class="zong"></a></p>
				<span>不含运费</span>
			</div>
			<button>结算（<a class="jiesuanLength"></a>）</button>
		</div>
	</div>
	
	<div class="public_mask"></div>
	<div class="public_tan">
		<div class="content">
			<p>确认删除购物车中的产品？</p>
		</div>
		<div class="caozuo">
			<a class="cancel">取消</a>
			<a class="confirm">确认</a>
		</div>
	</div>
	<script>
		$('.del').click(function(){
			openMask();
		});
		$('.public_mask,.cancel').click(function(){
			closeMask();
		});
		$('.confirm').click(function(){
			alert('在此执行删除操作');
			setTimeout(function(){
				closeMask();
			},1000);
		})
		function openMask(){
			$('.public_mask').fadeIn(100);
			$('.public_tan').fadeIn(100);
		}
		function closeMask(){
			$('.public_mask').fadeOut(100);
			$('.public_tan').fadeOut(100);
		}
	</script>
	<!--底部tabbar部分-->
    <div class="tabbar">
    	<ul>
    		<li>
    			<a href="#">
    				<p>
    					<img class="default" src="static/images/tabbar_0.png" />
    					<img class="on" src="static/images/tabbar_0_on.png" />
    				</p>    				
    				<span>首页</span>
    			</a>
    		</li>
    		<li>
    			<a href="#">
    				<p>
    					<img class="default" src="static/images/tabbar_1.png" />
    					<img class="on" src="static/images/tabbar_1_on.png" />
    				</p>    				
    				<span>商品分类</span>
    			</a>
    		</li>
    		<li>
    			<a href="#" class="active">
    				<p>
    					<img class="default" src="static/images/tabbar_2.png" />
    					<img class="on" src="static/images/tabbar_2_on.png" />
    				</p>    				
    				<span>购物车</span>
    			</a>
    		</li>
    		<li>
    			<a href="#">
    				<p>
    					<img class="default" src="static/images/tabbar_3.png" />
    					<img class="on" src="static/images/tabbar_3_on.png" />
    				</p>    				
    				<span>我的</span>
    			</a>
    		</li>
    	</ul>
    </div>
    <script>
    	$('.tabbar ul a').click(function(){
    		$(this).parent('li').siblings('li').find('a').removeClass('active');
    		$(this).addClass('active');
    	});
    </script>
    <!--底部tabbar部分-->
    
    <script>
    	$('.num').click(function(){
    		return false;
    	});
    	$('.cartList .item').click(function(){
    		$(this).stop(true).toggleClass('active');
    		getJiesuanLength();
    		heji();
    		getCheck();
    	});
    	$('.cartList .item .content .info .right button.jian').click(function(){
    		var num = Number($(this).siblings('input').val());
    		if (num <= 1) {
		      	return false;
		    } else {
		    	num = num - 1;
    			$(this).siblings('input').val(num);
    			heji();
		    }
    		return false;
    	});
    	$('.cartList .item .content .info .right button.jia').click(function(){
    		var num = Number($(this).siblings('input').val());
    		num = num + 1;
    		$(this).siblings('input').val(num);
    		heji();
    		return false;
    	});
    	$('.cartList .item .pic,.cartList .item .content .title a').click(function(e){
    		var href = $(this).attr('href');
    		window.location.href = href;
    		return false;
    	});
    	
    	var check;
    	$('.bottom_caozuo .left label').click(function(){
    		if(check == false){
    			$(this).addClass('active').html('全不选');
    			$('.cartList .item').addClass('active');
    			check = true;
    		} else {
    			$(this).removeClass('active').html('全选');
    			$('.cartList .item').removeClass('active');
    			check = false;
    		}
    		getJiesuanLength();
    		heji();
    	});
    	
    	getCarLength();  
    	var carLength;
    	function getCarLength(){
    		carLength = $('.cartList .item').length;
    		$('.carLength').html(carLength);
    	}
    	getJiesuanLength();
    	var jiesuanLength;
    	function getJiesuanLength(){    		
    		$('.cartList').each(function(){
    			jiesuanLength = $(this).find('.active').length;
    		});
    		$('.jiesuanLength').html(jiesuanLength);    		
    	}
    	
    	getCheck();
    	function getCheck(){
    		if(carLength == jiesuanLength){
				$('.bottom_caozuo .left label').addClass('active').html('全不选');
				check = true;
			} else {
				$('.bottom_caozuo .left label').removeClass('active').html('全选');
				check = false;
			}
    	}
    	
    	heji();
    	function heji(){
    		var zong = 0;
    		$('.cartList .active').each(function(){
    			var all = parseFloat($(this).find('.danjia').html())*Number($(this).find('.num').val());
    			zong += all;
    		});
    		$('.zong').html(zong.toFixed(2))
			console.log('计算总价：' + zong.toFixed(2))
    	}
    </script>
    <script>
    	$(function(){
    		function getHeight(){
    			var winHeight = $(window).outerHeight(true);
	    		var topHeight = $('.public_noback').outerHeight(true);
	    		var bottomHeight = $('.tabbar').outerHeight(true);
	    		var bottomHeight1 = $('.bottom_caozuo').outerHeight(true);
	    		var mainHeight = winHeight - topHeight - bottomHeight - bottomHeight1 - 5;
	    		$('.cartList').css('height',mainHeight + 'px');
    		}
    		getHeight();    		
    		window.onresize = function(){
    			getHeight();
    		}
    	});
    </script>
</body>
</html>
